import { defineComponent, onMounted, ref, onBeforeUnmount } from 'vue';
/* hooks */
import { useDialog } from '@hooks/useDialog';
import { useCurrentInstance } from '@src/modules/intelligentQuality/hooks/index.ts'
import './index.scss';

export default defineComponent({
  name: 'IntellResultDialog',
  setup(props, { emit, expose }) {
    const { visible, showDialog, hideDialog } = useDialog();
    const [currentCtx]  = useCurrentInstance()

    const photoData = ref({})
    const getModalAttrs = () => {
      return {
        props: {
          class: 'intell-result-modal',
          width: '500px',
          title: '质检结果',
          show: visible.value,
          appendToBody: true,
        },
        on: {
          'update:show': (value: boolean) => {
            visible.value = value;
            emit('updateModalValue', value);
          },
        },
      };
    };

    const clearDialog = () => {
      hideDialog();
      photoData.value = {};
    };
    const open = (value: any) => {
      showDialog();
      photoData.value = value;
    }
    /**
     * @description 图片预览
     */
    const previewImg = (url: string) => {
        if (!url) return;
        // @ts-ignore
        currentCtx.$previewElementImg(url)
    }
    expose({
      open,
      hideDialog,
    });


    // const handleClickOutside = (event) => {
    //   const quTdImgElement = document.querySelector('.qu-td-img');
    //   if (quTdImgElement && quTdImgElement.contains(event.target)) {
    //     // 点击事件发生在 qu-td-img 内部，不做处理
    //     return;
    //   }
    //   if (dialogRef.value && !dialogRef.value.$el.contains(event.target)) {
    //     clearDialog();
    //   }
    // };

    // onMounted(() => {
    //   document.addEventListener('click', handleClickOutside);
    // });

    // onBeforeUnmount(() => {
    //   document.removeEventListener('click', handleClickOutside);
    // });

    return {
      photoData,
      getModalAttrs,
      clearDialog,
      previewImg,
    };
  },
  render() {
    return (
      <base-modal {...this.getModalAttrs()} onCancel={() => this.clearDialog()}>
        <div class="intell-result-dialog">
          <div class="origin-left origin-base"> 
            <img src={this.photoData.pictureUrl || ''} class="origin_photo" onClick={() => this.previewImg(this.photoData.pictureUrl)}/>
            <div class="origin_group">
                <div class="origin_text">原图</div>
                <div class={`origin_text_score ${this.photoData.pass ? 'success' : 'fail'}`}>相似度：{this.photoData.sim || ''}%</div>
            </div>
          </div>
          <div class="origin-right origin-base">
            <img src={this.photoData.lastLikePictureUrl || ''} class="origin_photo" onClick={() => this.previewImg(this.photoData.lastLikePictureUrl)} />
            <div class="origin_group">
                <span class="origin_text">对比图</span>
            </div>
          </div>
        </div>
      </base-modal>
    );
  },
});
